<template>
  <div>
    <div class="box">
      <van-list
        v-model="loading"
        @load="load"
        :finished="finished"
        finished-text="没有更多了"
      >
        <h2 v-for="(i, index) in arr" :key="index">{{ i }}</h2>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      loading: false,
      finished: false
    }
  },
  methods: {
    load () {
      setTimeout(() => {
        // 添加数据(数据累加)
        this.arr.push(Date.now())
        // 还原loading的值
        this.loading = false
        // 判断是否所有数据加载完成
        if (this.arr.length >= 18) {
          this.finished = true
        }
      }, 2000)
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 300px;
  height: 200px;
  border: 2px solid red;
  overflow-y: auto;
}
</style>
